دسته بندی ها
01:54 1398/12/02

ایجاد زیرمنوی چندلایه توسط html و jquery

با عرض سلام و خسته نباشید

طبق عکس زیر :

زمانی که روی منوی درمان قطع عضو کلیلک می کنم زیر منوی مربوط به درمان قطع عضو باز نمی شود.کدی را هم که برای این dropdown نوشتم برای شما ارسال می کنم.ممنون میشم راهنمایی کنید تا مشکلم حل شود.(کد منو از سایت getbootstrap.com گرفته شده) 

 

  <div class="row" id="menu">
        <div>
            <nav class="navbar navbar-inverse">
                <div class="container-fluid">
                    <div class="container">
                        <div class="navbar-header">
                            <a class=" navbar-brand glyphicon glyphicon-home" href="#" id="myHome"></a>
                        </div>
                        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav">
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">درمان <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a>درمان قطع عضو &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">مراحل درمان</a></li>
                                                <li><a href="#">عمل جراحی</a></li>
                                                <li><a href="#">بهداشت و مراقبت</a></li>
                                            </ul>
                                        </li>
                                        <li role="separator" class="divider"></li>
                                        <li><a href="#">تعویض مفصل</a></li>
                                        <li role="separator" class="divider"></li>
                                        <li><a href="#">ترمیم رباط صلیبی و مینیسک</a></li>
                                    </ul>
                                </li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">محصولات <span class="caret"></span></a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a>پروتز اندو - اکسو &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;></a>
                                            <ul class="dropdown-menu">
                                                <li><a href="#">سیستم اندو - اکسو</a></li>
                                                <li><a href="#">ساختار</a></li>
                                                <li><a href="#">درمان</a></li>
                                            </ul>
                                        </li>
                                        <li role="separator" class="divider"></li>
                                        <li><a href="#">ترمیم رباط</a></li>
                                        <li role="separator" class="divider"></li>
                                        <li><a href="#">تعویض مفصل</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">اصلاح ناهنجاری</a></li>
                                <li><a href="#">مقاله</a></li>
                                <li><a href="#">گالری تصاویر بیمار</a></li>
                                <li><a href="#">رزومه</a></li>
                                <li><a href="#">تماس با ما</a></li>
                            </ul>
                            <form class="navbar-form navbar-left">
                                <div class="form-group">
                                    <input type="text" class="form-control" placeholder="جستجو ..." />
                                </div>
                                <button type="submit" class="btn btn-success">بگرد !</button>
                            </form>
                            <!--<ul class="nav navbar-nav navbar-right">
                                <li><a href="#">Link</a></li>
                            </ul>-->
                        </div>
                    </div>
                </div>
            </nav>
        </div>
    </div>

 

ویرایش شده در جمعه 2 اسفند 1398 ساعت 14:21:46
مشخصات سوال کننده :
کاربر : rezaten64     امتیاز کاربر : 0     رتبه کاربر : 7018
دسته بندی : جاوا اسکریپت Asp.net Web Form جی کوئری Css
به این سوال امتیاز بدهید    0
تعداد بازدید این سوال : 3599
پاسخ دهنده : fateme 14:32 1398/12/02

شما برای ایجاد یک منو به صورت چند سطحی بهتره یک سرچ در گوگل بزنید چون خیلی کدهای زیادی هست. می تونید این لینک رو ببینید.

همونطوری که می بینید در لینکی که اشاره شد آموزش ساخت یک منوی چند سطحی کامل آموزش داده شده

 

به این پاسخ امتیاز بدهید    2
امتیاز: 1617 رتبه: 2
پاسخ دهنده : mohammad-i 19:35 1398/12/02

حتی بدون Jquery و با html-css هم میتونی بسازی.

راه های رسیدن به خدا زیاده :)

به این پاسخ امتیاز بدهید    0
امتیاز: 260 رتبه: 7
پاسخ دهنده : rezaten64 19:45 1398/12/02

من این کد رو از اینترنت پیدا کردم

همین کد رو تو سایت خودم paste کردم 

اما وقتی روی توی سایت خودم رو service c قرار می گیرم service c1 و service c2 و service c3 و ... نشون داده نمیشه ... کدی که نوشتم درسته ولی نه داخل گوگل کروم درست اجرا میشه نه داخل فایرفاکس . ممنون میشم راهنماییم کنین و بگید چی کار باید بکنم....سپاس

 

به این پاسخ امتیاز بدهید    0
امتیاز: 0 رتبه: 7018
پاسخ دهنده : rezaten64 20:48 1398/12/02

 کدهایی رو که از سایت پیدا کردم براتون گذاشتم ... یه جا خوندم چون ورژن بوت استرپ بالاست و submenu مربوط به ورژن های خیلی پایینتر بوت استرپ اهست برای همین اجرا نمیشه .نمی دونم تا چه حد درسته.اگه اینجوریه چجوری میشه ورژن بوت استرپ رو تو سایت خودم عقب بیارم تا submenu برام کار کنه؟؟؟

    <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> <span class="nav-label">Services</span> <span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a href="#">Service A</a></li>
                <li><a href="#">Service B</a></li>
                <li class="dropdown-submenu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> <span class="nav-label">Service C</span><span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Service C1</a></li>
                        <li><a href="#">Service C2</a></li>
                        <li><a href="#">Service C3</a></li>
                        <li><a href="#">Service C4</a></li>
                        <li><a href="#">Service C5</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
ویرایش شده در یکشنبه 28 فروردین 1401 ساعت 15:45:18
به این پاسخ امتیاز بدهید    0
امتیاز: 0 رتبه: 7018
پاسخ دهنده : mohammad-i 11:03 1398/12/03

دوست عزیز، من هم قبلا مشکل شما رو داشتم و مجبور شدن  کدهایی بنویسم که وابستگی به بوت استرپ یا جی کوئری نداشته باشه.

این نمونه کد منوی تو در تو که فقط با html-css کار میکنه. توی یکی از پروژه هام استفاده کردم و تا الان توی هیچ مرورگری به مشکل بر نخوردم.

موفق باشی. :)

<html>
<head>
<style>
/*---------------------------Menu------------------------------------------------------------------------------------*/
.menu-frame{
    height:70px;
}
.top-level-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-right: 10px;
}

.top-level-menu > li {
    position: relative;
    float: right;
    height: 30px;
    width: 150px;
    text-align: center;
}

.top-level-menu li:hover > ul {
    /* On hover, display the next level's menu */
    display: inline;
}


/* Menu Link Styles */
.top-level-menu a /* Apply to all links inside the multi-level menu */ {
    color: black;
    text-decoration: none;
    padding: 15px 0 10px 10px;
    /* Make the link cover the entire list item-container */
    display: block;
    line-height: 30px;
}

.top-level-menu a:hover {
    color: white;
    background-color: #33B5E5
}

.second-level-menu {
    position: absolute;
    top: 50px;
    left: 0;
    width: 148px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    border: 1px solid #c1c1c1;
    border-top: none;
    background-color: white;
    z-index: 999;
}

.second-level-menu > li {
    position: relative;
    z-index: 999;
}

.third-level-menu {
    position: absolute;
    top: 0;
    right: 150px;
    width: 148px;
    list-style: none;
    padding: 0;
    margin: 0;
    display: none;
    border: 1px solid #c1c1c1;
    background-color: white;
    z-index: 999;
}

.third-level-menu > li {
    z-index: 999;
}
</style>
<body>
<div class="menu-frame module form-module" style="max-width: 90%; margin-bottom: 10px;">
        <ul class="top-level-menu">
            <li>
                <a >menu item</a>
                <ul  class="second-level-menu">
                    <li><a href="#">secend level</a></li>
                    <li><a href="#">secend level</a></li>
                    <li><a href="#">secend level</a>
                        <ul class="third-level-menu">
                        <li><a href="#">third level</a></li>
                    </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a >menu item 2</a>
                <ul  class="second-level-menu">
                    <li><a href="#">secend level</a></li>
                    <li><a href="#">secend level</a></li>
                    <li><a href="#">secend level</a>
                        <ul class="third-level-menu">
                        <li><a href="#">third level</a></li>
                    </ul>
                    </li>
                </ul>
            </li>
            
        </ul>
    </div>
</body>
</html>

 

ویرایش شده در یکشنبه 28 فروردین 1401 ساعت 15:45:50
به این پاسخ امتیاز بدهید    1
امتیاز: 260 رتبه: 7
پاسخ دهنده : rezaten64 19:11 1398/12/07

سلام آقا محمد . کد شما رو یکم تغییر دادم و گذاشتم تو سایتم و مشکلم حل شد دستت درد نکنه از راهنماییت.یه سوال دیگه دارم فقط در مورد یه مبحث دیگه اونم اینه که وقتی صفحه سایت رو اندازه موبایل میکنم منویی که سه خط روی هم داره (منوی همبرگری به اصطلاح) به همراه تمام اجزاش نشون داده میشه و موقع اجرا مخفی نمیست که وقتی منو رو بزنم اجزاش ظاهر بشه.ممنون میشم اگه این مشکل منم حل کنین.من کد این منو رو مستقیم از آموزش آقای بحرانی فرد گرفتم ....

                    <div class="navbar-header">

                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class=" navbar-brand glyphicon glyphicon-home" href="#" id="myHome"></a>
                    </div>

ویرایش شده در یکشنبه 28 فروردین 1401 ساعت 15:46:18
به این پاسخ امتیاز بدهید    0
امتیاز: 0 رتبه: 7018
پاسخ دهنده : mohammad-i 23:37 1398/12/07

در این کد ها از Bootstrap  استفاده شده که همه چیزش آماده اس. ولی شما یه منو رو خودتون ساختین. پس باید منوی همبرگری رو هم خودتون بسازید.

توی این لینک(از سایت w3school) به صورت ساده آموزش ساختش رو گزاشته. دیگه باید یه کم وقت بزارید پیاده سازیش کنید روی منوی خودتون :)

 

نکته آموزشی : در صورتی که بخوای یک المنت توی صفحه موبایل یا کلا رزولیشن های مختلف، حالت های مختلفی داشته باشه میتونی از media query ها در css استفاده کنی. یه نمونه اش رو توی مثال زیر میبینید:

@media only screen and (max-width: 576px) {    #Menu{        height: 200px !important;    }}

توی این مثال گفتم اگه صفحه نمایش کمتر از 576 پیکسل بود ارتفاع المنتی که آیدیش Menu هست رو تغییر بده.

 

ویرایش شده در پنج شنبه 8 اسفند 1398 ساعت 01:24:11
به این پاسخ امتیاز بدهید    2
امتیاز: 260 رتبه: 7
پاسخ دهنده : saedbfd 19:51 1399/12/03
به این پاسخ امتیاز بدهید    0
امتیاز: 1654 رتبه: 1
آخرین سوالات ثبت ‌شده
سوالات مرتبط
برای ارسال پاسخ لطفا وارد حساب کاربری خود شوید.   ورود